<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/normalize.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>
        .bed-num {
            width: 20%;
            height: 60px;
            margin-bottom: 30px;
        }

        #in-hospital-list {
            position: relative;
            padding: 30px 30px;
            min-height: 300px;
        }

        /* 床位号 */
        #bed-num-model {
            display: none;
        }

        .bed-sm {
            padding: .5em 1em;
            min-height: 50px;
            border: 1px solid #666;
            border-left-width: 5px;
            border-radius: 5px;
            margin: 0;
            position: relative;
        }

        .bed-sm p {
            margin-bottom: 0;
            line-height: 1.5em;
        }

        /* 床位详细信息显示 */
        #show-bed-mes-model {
            display: none;
            border-radius: 5px;
            background-color: #fff;
        }

        .show-bed-mes {
            padding: 5px;
            border: 1px solid #666;
            border-radius: 5px;
            background-color: #fff;
            margin-bottom: 30px;
        }

        .bed-num-show-lg {
            position: absolute;
            left: -5px;
            top: 51px;
            z-index: 100;
            min-width: 280px;
            z-index: 1000;
        }

        .bed-num-show-lg > .show-bed-mes {
            margin-bottom: 0;
        }

        .show-bed-mes > ul {
            padding: 0;
            margin: 0;
        }

        .show-bed-mes > ul > li {
            list-style: none;
        }

        .show-bed-mes > ul > li > span {
            padding-right: 5px;
        }

        .show-bed-mes > ul:first-child {
            float: left;
            height: auto;
            width: 50%;
        }

        .show-bed-mes > ul:first-child > li {
            height: 2em;
            line-height: 2em;
            padding: 5px 0;
        }

        .show-bed-mes > ul:last-child {
            float: right;
            padding-left: 5px;
            background-color: #E2E5EE;
        }

        .show-bed-mes > ul:last-child > li {
            height: 25px;
            line-height: 25px;
            clear: both;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        .show-bed-mes > ul:last-child > li > b,
        .show-bed-mes > ul:last-child > li > span {
            float: left;
            height: 23px;
        }

        .show-bed-mes > ul:last-child > li > b {
            width: 3em;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            text-align: center;
        }

        .show-bed-mes > ul:last-child > li > span {
            text-indent: 0.5em;
            width: 6em;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .show-bed-mes > ul:last-child > li:nth-child(1) > b {
            background-color: #5BCCFF;
        }

        .show-bed-mes > ul:last-child > li:nth-child(2) > b {
            background-color: #85D266;
        }

        .show-bed-mes > ul:last-child > li:nth-child(3) > b {
            background-color: #FFC961;
        }

        .show-bed-mes > ul:last-child > li:nth-child(4) > b {
            background-color: #FF7761;
        }

        .show-bed-mes > ul:last-child > li:nth-child(5) > b {
            background-color: #A889E9;
        }

        .color-remark {
            padding: 15px 0;
        }

        .color-remark > span {
            margin: 15px 20px;
            position: relative;
        }

        .color-remark > span::before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 16px;
            position: absolute;
            top: 0;
            left: -20px;
        }

        .color-remark > span:nth-child(1)::before {
            background-color: #FF00C6;
        }

        .color-remark > span:nth-child(2)::before {
            background-color: #00B7EE;
        }

        .color-remark > span:nth-child(3)::before {
            background-color: #1AB25D;
        }

    </style>
</head>

<body class="ares-p">

<div class="ares-my">
    <b class="ares-mr-lg">
        <span>患者编号：</span>
        <span class="my-patient-num"></span>
    </b>
    <b class="ares-mr-lg">
        <span>姓名：</span>
        <span class="my-patient-name"></span>
    </b>
    <b class="ares-mr-lg">
        <span>性别：</span>
        <span class="my-patient-sex"></span>
    </b>
    <b class="ares-mr-lg">
        <span>年龄：</span>
        <span class="my-patient-age"></span>
    </b>
    <b class="ares-mr-lg">
        <span>医保类型：</span>
        <span class="my-patient-type"></span>
    </b>
</div>
<form class="layui-form" lay-filter="transfer-form">
    <div class="layui-form-item">
        <label class="layui-form-label">患者类型 <i class="ares-text-red">*</i></label>
        <div class="layui-input-block">
            <select name="patient-type" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">住院患者</option>
                <option value="2">门诊患者</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">转诊备注</label>
        <div class="layui-input-block">
            <input type="radio" name="new-remark" lay-filter="new-remark" value="1" lay-verify-label="转诊备注"
                   lay-verify="requiredRaido" title="患者病情稳定，转入下一级医院治疗" checked>
            <input type="radio" name="new-remark" lay-filter="new-remark" value="2" title="患者病情出现变化，转入上一级医院治疗">
            <input type="radio" name="new-remark" lay-filter="new-remark" value="3" title="家庭康复">
            <input type="radio" name="new-remark" lay-filter="new-remark" value="4" title="其他情况">
            <input class="layui-input" name="remark-text" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通知医生</label>
        <div class="layui-input-block">
            <input type="radio" name="hospital-doctor-radios" lay-filter="hospital-doctor-radios" value="1"
                   lay-verify-label="通知医生" lay-verify="requiredRaido" title="所有系统医生" checked>
            <input type="radio" name="hospital-doctor-radios" lay-filter="hospital-doctor-radios" value="2"
                   title="指定医生">
        </div>
    </div>
    <div class="assign-doctor layui-hide">
        <div class="layui-form-item">
            <label class="layui-form-label">选择区域</label>
            <div class="layui-input-block">
                <select name="hospital-district-select" lay-filter="hospital-district-select"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">医院分类</label>
            <div class="layui-input-block">
                <select name="hospital-level-select" lay-filter="hospital-level-select"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择医院</label>
            <div class="layui-input-block">
                <select name="hospital-select" lay-filter="hospital-select"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择医生</label>
            <div class="layui-input-block">
                <select name="doctor-select" lay-filter="doctor-select"></select>
            </div>
        </div>
    </div>
    <div class="layui-form-item ares-text-center">
        <button class="layui-btn" lay-submit lay-filter="transfer-submit">提交</button>
    </div>
</form>


<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use(['form', 'utils', 'filters', 'dateFilters', 'greyServices', 'mandyServices', 'commonServices', 'store', 'constants'], function (form, utils, filters, dateFilters, greyServices, mandyServices, commonServices, store, constants) {
        var hospitalId = store.session.get("hospital"), EMRId, hospitalMap = {};

        buildTransferForm(utils.ARES.cache.homepage)

        /**
         * @author: ares
         * @date: 2021/1/22 11:23
         * @description: 转诊备注切换
         */
        form.on('radio(new-remark)', function (data) {
            var $remarkText = $('input[name="remark-text"]');
            if (data.value == 4) {
                $remarkText.prop('disabled', false);
            } else {
                $remarkText.val('');
                $remarkText.prop('disabled', true);
            }
        });
        /**
         * @author: ares
         * @date: 2021/1/22 11:28
         * @description: 通知医生切换
         */
        form.on('radio(hospital-doctor-radios)', function (data) {
            var $assginDoctorDiv = $('.assign-doctor'),
                $hospitalDistrictSelect = $('select[name="hospital-district-select"]'),
                $hospitalLevelSelect = $('select[name="hospital-level-select"]'),
                $hospitalSelect = $('select[name="hospital-select"]'),
                $hospitalDoctorSelect = $('select[name="doctor-select"]');
            if (data.value == 2) {
                $hospitalDistrictSelect.attr('lay-verType', 'tips').attr('lay-verify', 'required');
                $hospitalLevelSelect.attr('lay-verType', 'tips').attr('lay-verify', 'required');
                $hospitalSelect.attr('lay-verType', 'tips').attr('lay-verify', 'required');
                $hospitalDoctorSelect.attr('lay-verType', 'tips').attr('lay-verify', 'required');
                $assginDoctorDiv.removeClass('layui-hide');
            } else {
                $hospitalDistrictSelect.removeAttr('lay-verType').removeAttr('lay-verify');
                $hospitalLevelSelect.removeAttr('lay-verType').removeAttr('lay-verify');
                $hospitalSelect.removeAttr('lay-verType').removeAttr('lay-verify');
                $hospitalDoctorSelect.removeAttr('lay-verType').removeAttr('lay-verify');
                form.val('transfer-form',{
                    'hospital-district-select': '',
                    'hospital-level-select': '',
                    'hospital-select': '',
                    'doctor-select': '',
                })
                $assginDoctorDiv.addClass('layui-hide');
            }
        });
        /**
         * @author: ares
         * @date: 2021/1/22 15:34
         * @description: 切换医院所在区域
         */
        form.on('select(hospital-district-select)', function (data) {
            var id = data.value,
                $hospitalLevelSelect = $('select[name="hospital-level-select"]'),
                $hospitalSelect = $('select[name="hospital-select"]'),
                $doctorSelect = $('select[name="doctor-select"]');

            $hospitalLevelSelect.empty().append('<option value="">请选择医院分类</option>');
            $hospitalSelect.empty().append('<option value="">请选择医院</option>');
            $doctorSelect.empty().append('<option value="">请选择医生</option>');

            if (id) {
                var area = data.othis.find(".layui-this").text();
                makeHospitalLevelSelect(area);
            }
        })
        /**
         * @author: ares
         * @date: 2021/1/22 16:16
         * @description: 切换医院等级
         */
        form.on('select(hospital-level-select)', function (data) {
            var id = data.value,
                $hospitalDistrictSelect = $('select[name="hospital-district-select"]'),
                $hospitalSelect = $('select[name="hospital-select"]'),
                $doctorSelect = $('select[name="doctor-select"]'),
                area = $hospitalDistrictSelect.next().find(".layui-this").text();

            $hospitalSelect.empty().append('<option value="">请选择医院</option>');
            $doctorSelect.empty().append('<option value="">请选择医生</option>');

            if (hospitalMap[area] && $.type(hospitalMap[area][id]) == 'array') {
                makeHospitalSelect(hospitalMap[area][id]);
            }
        })
        /**
         * @author: ares
         * @date: 2021/1/22 16:34
         * @description: 切换医院
         */
        form.on('select(hospital-select)', function (data) {
            var id = data.value,
                $doctorSelect = $('select[name="doctor-select"]');

            $doctorSelect.empty().append('<option value="">请选择医院</option>');

            if (id) {
                commonServices.getTransferDoctorService(id).then(function (res) {
                    makeDoctorSelect(res.data);
                });
            }
        })
        /**
         * @author: ares
         * @date: 2021/1/25 9:16
         * @description: 提交转诊
         */
        form.on('submit(transfer-submit)', function (data) {
            var $ele = $(data.elem),
                fields = data.field,
                $form = $(data.form);
            var patientType = fields['patient-type'];

            var newRemark = "";
            var remark = "转诊患者是" + patientType;
            var $remarkChecked = $form.find("input[name='new-remark']:checked");
            var remarkCheckedValue = fields['new-remark'];

            if (4 != remarkCheckedValue) {
                newRemark = $remarkChecked.attr('title').trim();
            } else {
                newRemark = $form.find("input[name='remark-text']").val();
                if (newRemark.length > 128) {
                    utils.msgError('描述信息请不要超过128个字');
                    $ele.attr("disabled", false);
                    return false;
                }
                newRemark = newRemark.trim() == "" || newRemark == null ? "其他情况" : newRemark;
            }
            if (newRemark != null && newRemark.trim() != "") {
                remark += "," + newRemark;
            }

            var info = $form.find("select[name='doctor-select'] option:selected").data("info");

            $ele.prop('disabled', true).addClass('layui-btn-disabled');
            mandyServices.mandy_post_out_emr(EMRId, fields['hospital-select'], fields['doctor-select'], info, remark, fields['new-remark']).then(function (res) {
                utils.msgSuccess(res.message)
                $ele.prop('disabled', false).removeClass('layui-btn-disabled')
                utils.layer.closeAll('iframe');
                utils.ARES.event.emit('updateHomepage');
            }).catch(function (err) {
                $ele.prop('disabled', false).removeClass('layui-btn-disabled')
            });
            return false;
        });
        form.render();

        //获取医院所在区域
        function buildDistrictSelect(cityId) {
            return mandyServices.mandy_get_district_list(cityId).then(function (res) {
                var data = res.data,
                    $hospitalDistrictSelect = $('select[name="hospital-district-select"]'),
                    $fragment = $(document.createDocumentFragment());
                $hospitalDistrictSelect.empty();
                $fragment.append($("<option value=''>请选择医院所在区</option>"));
                if (data.district_list.length == 0) {
                    utils.msgError("该城市没有任何区县，请检查cityId是否正确");
                    return;
                }
                $.each(data.district_list, function (idx, district) {
                    $fragment.append("<option value='" + district.id + "'>" + district.name + "</option>");
                });
                $hospitalDistrictSelect.append($fragment);
                form.render('select', 'transfer-form');
            });
        }

        //获取所有医院的信息，并按照医院等级、区域进行存储在hospitalMap中
        function getHospitalList() {
            greyServices.grey_get_hospital_list(null, null).then(function (res) {
                var data = res.data;
                hospitalMap = {};
                if (data.hospital_list) {
                    $.each(data.hospital_list, function (idx, val) {

                        var arr = hospitalMap[val.district.name];
                        arr = arr == null ? {} : arr;

                        var arr1 = arr[val.level + ""];
                        arr1 = arr1 == null ? [] : arr1;

                        arr1.push(val);
                        arr[val.level + ""] = arr1;

                        hospitalMap[val.district.name] = arr;
                    });
                }
                var options = $('select[name="hospital-district-select"] option');
                $.each(options, function (idx, option) {
                    if (hospitalMap[$(option).text()] == null && $(option).text().indexOf("请选择") == -1) {
                        $(option).attr("disabled", true);
                    }
                })
                form.render('select', 'transfer-form');
            });
        }

        //构建医生下拉列表
        function makeDoctorSelect(list) {
            $doctorSelect = $('select[name="doctor-select"]'),
                $fragment = $(document.createDocumentFragment());
            $fragment.append('<option value="">请选择医生</option>');

            if ($.type(list) == 'array') {
                $.each(list, function (index, item) {
                    var option = $('<option value="' + item.id + '">' + item.name + '</option>');
                    option.data("info", item);
                    $fragment.append(option);
                });
            }
            $doctorSelect.empty().append($fragment);
            form.render('select', 'transfer-form');
        }

        //在此处对某区域某等级下的医院进行筛选
        function makeHospitalSelect(list) {
            $hospitalSelect = $('select[name="hospital-select"]'),
                $fragment = $(document.createDocumentFragment());
            $hospitalSelect.empty();
            $fragment.append('<option value="">请选择医院</option>');
            $.each(list, function (index, item) {
                var option = $('<option value="' + item.id + '">' + item.name + '</option>');
                if (hospitalId == item.id) option.text("当前医院").attr("disabled", true);
                $fragment.append(option);
            });
            $hospitalSelect.append($fragment);
            form.render('select', 'transfer-form');
        }

        //构建医院等级下拉列表
        function makeHospitalLevelSelect(area) {
            var $hospitalLevelSelect = $('select[name="hospital-level-select"]'),
                $fragment = $(document.createDocumentFragment());
            $hospitalLevelSelect.empty();
            $fragment.append('<option value="">请选择医院分类</option>');
            $.each(constants.hospitalLevelList, function (index, item) {
                var option = $('<option value="' + item.k + '">' + item.v + '</option>');
                if (!hospitalMap[area][item.k]) option.attr("disabled", true);
                $fragment.append(option);
            })
            $hospitalLevelSelect.append($fragment);
            form.render('select', 'transfer-form');
        }

        //构建转诊模态框
        function buildTransferForm(rowObject) {
            if (!rowObject) return;

            var myPatient = {
                EMRnum: rowObject.number,
                EMRId: rowObject.id,

                patientName: rowObject.patient.name,
                patientId: rowObject.patient.id,

                patientSex: filters.sexFormat(rowObject.patient.sex),
                patientSexVal: rowObject.patient.sex,

                patientAge: filters.ageFormat(rowObject.patient.birthday),
                patientAgeVal: rowObject.patient.birthday,

                HIStype: filters.insuranceTypeFormat(rowObject.insurance_type),
                HIStypeVal: rowObject.insurance_type,

                createDate: dateFilters.dateTimeFormat(rowObject.create_time),
                createDateVal: rowObject.create_time
            };

            var clinics = rowObject.clinic_list;
            if (clinics && clinics.length > 0) myPatient.clinicId = clinics[0].id;

            EMRId = myPatient.EMRId;

            $(".my-patient-num").text(myPatient.EMRnum);
            $(".my-patient-name").text(myPatient.patientName);
            $(".my-patient-sex").text(myPatient.patientSex);
            $(".my-patient-age").text(myPatient.patientAge);
            $(".my-patient-type").text(myPatient.HIStype);
            $(".my-patient-diagnose").text(myPatient.diagnose);
            buildDistrictSelect(109).then(function () {
                getHospitalList();
            });
        }

    })
</script>


</body>

</html>
